/* eslint-disable @typescript-eslint/no-explicit-any */
import LinkCard from "@/components/LinkCard";
import PinyinText from "@/components/PinyinText";
import RequestList from "@/components/requestList";

export default async function Poem({
  searchParams,
}: {
  searchParams?: Promise<{ [key: string]: string | undefined }>;
}) {
  const searchParamsData = await searchParams;
  return (
    <RequestList
      config={{ url: "/api/poem/list", options: { method: "POST" } }}
      searchParams={searchParamsData}
      renderFunc={(list) => {
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-5 md:p-0">
            {list.map((item: any, index) => (
              <LinkCard key={index} path={`/poem/${item.id}`}>
                <div className="flex flex-col gap-y-2">
                  <div className="flex gap-x-2 items-center">
                    <div className="icon w-[30px] h-[30px] bg-[#feebed] rounded-2xl text-center font-bold  text-[#191970] leading-[30px]">
                      {item.title[0]}
                    </div>
                    <div>
                      <div>
                        <PinyinText text={item.title} />
                      </div>
                      <div>
                      <PinyinText text={`${item?.poet?.name} · ${item?.poet?.dynasty}`} />
                        
                      </div>
                    </div>
                  </div>
                  <div className="truncate">
                    <PinyinText text={item?.content||''} overflow={true} />
                  </div>
                </div>
              </LinkCard>
            ))}
          </div>
        );
      }}
    />
  );
}
